<script lang="ts" setup>
import PageDialog from "@/components/PageDialog/index.vue";
import {ref} from "vue";
import {OwnerObj, PaymentObj, ProjectObj} from "@/api/demoClass";
import {addPayment, addProject, editProject, ownerPaymentList, projectListByOwner} from "@/api/demoApi";
import {message} from "@/utils/message";

defineOptions({
  name: "ownerDialog"
});

/**-------------------表单相关-------------------**/
//表单参数
const formData = ref([])
const currentOwnerId = ref()
const currentIndex = ref(null)
const paymentTypeOptions = [
  {value:'18768877939',label:'单位'},
  {value:'18683983422',label:'个人'}
]
const projectOptions = ref([])
const getProjectOptions = id =>{
  projectOptions.value = projectListByOwner(id).map(item=>({label:`${item.projectNo}(${item.projectName})`,value:item.id}))
}

/**-------------------打开弹框-------------------**/
//标题
const dialogTitle = ref('')
const dialog = ref()
//弹框显示
const dialogShow = (title: string,id: string | number)=>{
  dialogTitle.value = title
  if(id) {
    currentOwnerId.value = id
    formData.value = ownerPaymentList(id)
    getProjectOptions(id)
  }
  dialog.value.dialogVisible = true
}
defineExpose({
  dialogShow
})

/**-------------------事件回调-------------------**/
//添加单位
const handlerCreate = ()=>{
    const newPayment = new PaymentObj({ownerId:currentOwnerId.value})
    formData.value.unshift(newPayment)
    currentIndex.value = 0
}
//表格校验
const validateRow = index =>{
  const currentRow = formData.value[index]
  if(currentRow) {
    if(!currentRow.paymentName) {
      message('单位名称必填',{type:'warning'})
      return false
    }
    if(!currentRow.paymentType) {
      message('单位类型必选',{type:'warning'})
      return false
    }
    if(!currentRow.bank) {
      message('开户行必填',{type:'warning'})
      return false
    }
    if(!currentRow.account) {
      message('账号必填',{type:'warning'})
      return false
    }
    if(!currentRow.phone) {
      message('联系电话必填',{type:'warning'})
      return false
    }
    if(!currentRow.address) {
      message('单位地址必填',{type:'warning'})
      return false
    }
    return true
  }
  return false
}
//表格操作
const handlers = (type,index) => {
  switch(type){
    case 'confirm':
      const flag = validateRow(index)
      if(flag) {
        currentIndex.value = null
      }
      break
    case 'edit':
        currentIndex.value = index
      break
    case 'del':
        formData.value.splice(index,1)
      break
  }
}
//取消
const handlerCancel = ()=> new Promise(async (resolve,reject)=>{
  try{
    formData.value = []
    currentIndex.value = null
    dialog.value.dialogVisible = false
    resolve({})
  }catch(e){
    console.log(e)
    reject(e)
  }
})
//确认
const emits = defineEmits(['done'])
const handlerConfirm = ()=> new Promise(async (resolve,reject)=>{
  try{
    //校验
    if(currentIndex.value || currentIndex.value === 0) {
      message('请先点击确定保存正在编辑行',{type:'warning'})
      return reject(false)
    }
    //todo 新增、编辑接口
    addPayment(currentIndex.value,formData.value)
    await handlerCancel()
    message('编辑成功',{type:'success'})
    emits('done')
    resolve({})
  }catch(e){
    reject(e)
  }
})
</script>

<template>
  <PageDialog ref="dialog" :handler-cancel="handlerCancel" :handler-confirm="handlerConfirm" :title="dialogTitle" width="65%">
    <el-table :data="formData">
      <el-table-column label="序号" type="index" width="65"/>
      <el-table-column align="center" label="单位名称" prop="paymentName" show-overflow-tooltip>
        <template #default="{row,$index}">
          <div v-if="$index === currentIndex">
            <el-input v-model="row.paymentName" clearable placeholder="必填" size="small" />
          </div>
          <div v-else>
            {{row.paymentName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单位类型" prop="paymentType" show-overflow-tooltip>
        <template #default="{row,$index}">
          <div v-if="$index === currentIndex">
            <el-select v-model="row.paymentType" clearable filterable placeholder="必选" size="small">
              <el-option v-for="(item,index) in paymentTypeOptions" :key="index" :label="item.label" :value="item.label" />
            </el-select>
          </div>
          <div v-else>
            {{row.paymentType}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="开户行" prop="bank" show-overflow-tooltip>
        <template #default="{row,$index}">
          <div v-if="$index === currentIndex">
            <el-input v-model="row.bank" clearable placeholder="必填" size="small" />
          </div>
          <div v-else>
            {{row.bank}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账号" prop="account" show-overflow-tooltip>
        <template #default="{row,$index}">
          <div v-if="$index === currentIndex">
            <el-input v-model="row.account" clearable placeholder="必填" size="small" />
          </div>
          <div v-else>
            {{row.account}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="联系电话" prop="phone" show-overflow-tooltip>
        <template #default="{row,$index}">
          <div v-if="$index === currentIndex">
            <el-input v-model="row.phone" clearable placeholder="必填" size="small" />
          </div>
          <div v-else>
            {{row.phone}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单位地址" prop="address" show-overflow-tooltip>
        <template #default="{row,$index}">
          <div v-if="$index === currentIndex">
            <el-input v-model="row.address" clearable placeholder="必填" size="small" />
          </div>
          <div v-else>
            {{row.phone}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template #header>
          <el-button plain size="small" type="primary" @click="handlerCreate">添加单位</el-button>
        </template>
        <template #default="{row,$index}">
          <el-button v-if="$index===currentIndex" size="small" text type="primary" @click="handlers('confirm',$index)">确定</el-button>
          <el-button v-if="$index!==currentIndex" size="small" text type="warning" @click="handlers('edit',$index)">编辑</el-button>
          <el-button v-if="$index!==currentIndex" size="small" text type="danger" @click="handlers('del',$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </PageDialog>
</template>

<style lang="scss" scoped>

</style>
